<template>
  <div class="bigbox"> 
    <div class="login"> 
        <el-form
    ref="ruleFormRef"
    :model="ruleForm"
    status-icon
    :rules="rules"
    label-width="120px"
    class="demo-ruleForm"
  >
    <el-form-item label="用户名" prop="username">
      <el-input v-model="ruleForm.username" type="text" autocomplete="off" />
    </el-form-item>
    <el-form-item label="密码" prop="checkPass">
      <el-input
        v-model="ruleForm.password"
        type="text"
        autocomplete="off"
      />
    </el-form-item>
    <el-form-item label="验证码" prop="captcha">
        <el-space>
            <el-input v-model.number="ruleForm.captcha" />
            <div @click="changeCaptchaFn">
                <img :src="captchaImg" alt="">
            </div>
        </el-space>
     
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm(ruleFormRef)"
        >登录</el-button
      >
      <el-button @click="resetForm(ruleFormRef)">重置</el-button>
    </el-form-item>
  </el-form>
    </div>
      
  </div>
</template>
<script setup>
import { reactive, ref } from 'vue'
import { useRouter } from "vue-router"
import {getcaptcha ,loginApi } from '@/api/https'
//定义验证码图片
const captchaImg = ref('')
const key = ref('')
getcaptcha().then(res =>{
    console.log(res);
    captchaImg.value = res.data.img
    key.value = res.data.key
})
 //点击切换验证按
 const changeCaptchaFn = () =>{
    getcaptcha().then(res =>{
    console.log(res);
    captchaImg.value = res.data.img
    key.value = res.data.key
})
 }
 
const ruleFormRef = ref()


//定义表单数据 
const ruleForm = reactive({
  username: '',
  password: '',
  key: '',
  captcha:''
}) 
//表单校验
const rules = reactive({
  username: [{ required: true,message:'请输入用户名', trigger: 'blur' }],
  password: [{ required: true, message:'请输入密码',trigger: 'blur' }],
  captcha: [{ required: true, message:'请输入验证码', trigger: 'blur' }],
})
const router = useRouter()
//登录按钮
const submitForm = (formEl) => {  
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
        ruleForm.key = key.value
        loginApi(ruleForm).then(res=>{
            console.log('res',res);
            if(res.data.errNo==0){
                localStorage.setItem('jwt',res.data.context.jwt)
                localStorage.setItem('acl',JSON.stringify(res.data.context.acl))
                //跳转首页
                router.push('/dashboard')

            }
              
        })
   
    } else {
      console.log('error submit!')
      return false
    }
  })
}

const resetForm = (formEl) => {
  if (!formEl) return
  formEl.resetFields()
}
</script>
<style scoped lang="scss"> 
.bigbox{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    .login{
        width: 400px;
    }
}
</style>
